<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能水肥管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="app-container">
        <!-- 左侧菜单 -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <i class="fas fa-tint"></i>
                <span>智能水肥管理平台</span>
            </div>
            
            <!-- 土壤墒情监测模块 -->
            <div class="menu-group">
                <div class="menu-title">
                    <i class="fas fa-seedling"></i>
                    <span>土壤墒情监测</span>
                </div>
                <ul class="menu-items">
                    <li class="active"><i class="fas fa-tint"></i>实时墒情</li>
                    <li><i class="fas fa-chart-line"></i>墒情趋势</li>
                    <li><i class="fas fa-layer-group"></i>分层监测</li>
                    <li><i class="fas fa-map-marked-alt"></i>区域分布</li>
                </ul>
            </div>

            <!-- 设备监控模块 -->
            <div class="menu-group">
                <div class="menu-title">
                    <i class="fas fa-desktop"></i>
                    <span>设备监控</span>
                </div>
                <ul class="menu-items">
                    <li><i class="fas fa-chart-line"></i>水肥设备状态</li>
                    <li><i class="fas fa-microscope"></i>实时数据监测</li>
                    <li><i class="fas fa-wifi"></i>远程控制</li>
                </ul>
            </div>

            <div class="menu-group">
                <div class="menu-title">
                    <i class="fas fa-water"></i>
                    <span>灌溉管理</span>
                </div>
                <ul class="menu-items">
                    <li><i class="fas fa-tasks"></i>施肥方案</li>
                    <li><i class="fas fa-tint"></i>施水方案</li>
                </ul>
            </div>

            <div class="menu-group">
                <div class="menu-title">
                    <i class="fas fa-brain"></i>
                    <span>智能决策</span>
                </div>
                <ul class="menu-items">
                    <li><i class="fas fa-robot"></i>智能化灌溉</li>
                </ul>
            </div>
        </nav>

        <!-- 主要内容区 -->
        <main class="main-content">
            <header class="top-bar">
                <div class="weather-info">
                    <div class="weather-item">
                        <i class="fas fa-cloud-sun"></i>
                        <div class="weather-data">
                            <span class="label">天气</span>
                            <span id="weather-condition" class="value">晴朗</span>
                        </div>
                    </div>
                    <div class="weather-item">
                        <i class="fas fa-temperature-high"></i>
                        <div class="weather-data">
                            <span class="label">温度</span>
                            <span id="current-temperature" class="value">26°C</span>
                        </div>
                    </div>
                    <div class="weather-item">
                        <i class="fas fa-tint"></i>
                        <div class="weather-data">
                            <span class="label">湿度</span>
                            <span id="current-humidity" class="value">65%</span>
                        </div>
                    </div>
                </div>
                <div class="user-profile">
                    <i class="fas fa-user-circle"></i>
                    <span>管理员</span>
                </div>
            </header>

            <div class="dashboard">
                <!-- 实时墒情面板 -->
                <div class="real-time-moisture-panel">
                    <div class="section-header">
                        <h2><i class="fas fa-tint"></i> 实时墒情监测</h2>
                    </div>
                    
                    <!-- 概览卡片 -->
                    <div class="moisture-overview">
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-tint"></i>
                            </div>
                            <div class="overview-info">
                                <h3>平均墒情</h3>
                                <div class="overview-value">
                                    <span id="avg-moisture">--</span>
                                    <span class="unit">%</span>
                                </div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-thermometer-half"></i>
                            </div>
                            <div class="overview-info">
                                <h3>土壤温度</h3>
                                <div class="overview-value">
                                    <span id="soil-temperature">--</span>
                                    <span class="unit">°C</span>
                                </div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-compress-arrows-alt"></i>
                            </div>
                            <div class="overview-info">
                                <h3>土壤紧实度</h3>
                                <div class="overview-value">
                                    <span id="soil-compactness">--</span>
                                    <span class="unit">kPa</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 实时监测数据 -->
                    <div class="monitoring-grid">
                        <div class="monitoring-card">
                            <div class="monitoring-header">
                                <h3>分区实时墒情</h3>
                                <div class="area-selector">
                                    <select id="area-selector">
                                        <option value="all">所有区域</option>
                                        <option value="area1">区域一</option>
                                        <option value="area2">区域二</option>
                                        <option value="area3">区域三</option>
                                        <option value="area4">区域四</option>
                                        <option value="area5">区域五</option>
                                    </select>
                                </div>
                            </div>
                            <div class="real-time-data">
                                <div class="data-table">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>监测点</th>
                                                <th>所属区域</th>
                                                <th>墒情值(%)</th>
                                                <th>温度(°C)</th>
                                                <th>状态</th>
                                                <th>更新时间</th>
                                            </tr>
                                        </thead>
                                        <tbody id="moisture-data-body">
                                            <!-- 数据将通过 JavaScript 动态填充 -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="monitoring-card">
                            <div class="monitoring-header">
                                <h3>实时墒情分布图</h3>
                            </div>
                            <div class="chart-container">
                                <canvas id="moistureDistributionChart"></canvas>
                            </div>
                        </div>

                        <div class="monitoring-card full-width">
                            <div class="monitoring-header">
                                <h3>24小时墒情变化</h3>
                            </div>
                            <div class="chart-container">
                                <canvas id="moisture24HChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 设备状态面板 -->
                <div class="device-status-panel" style="display: none;">
                    <div class="section-header">
                        <h2><i class="fas fa-server"></i> 水肥设备状态</h2>
                    </div>

                    <!-- 设备状态概览 -->
                    <div class="device-overview">
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-pump-medical"></i>
                            </div>
                            <div class="overview-info">
                                <h3>水泵运行状态</h3>
                                <div class="overview-value">
                                    <span id="pump-status" class="status-tag normal">正常运行</span>
                                </div>
                                <div class="device-meta">运行时长：<span id="pump-runtime">6</span>小时</div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-flask"></i>
                            </div>
                            <div class="overview-info">
                                <h3>肥料混合器</h3>
                                <div class="overview-value">
                                    <span id="mixer-status" class="status-tag warning">需维护</span>
                                </div>
                                <div class="device-meta">混合比例：<span id="mixer-ratio">1:100</span></div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-tachometer-alt"></i>
                            </div>
                            <div class="overview-info">
                                <h3>系统压力</h3>
                                <div class="overview-value">
                                    <span id="system-pressure">2.5</span>
                                    <span class="unit">MPa</span>
                                </div>
                                <div class="device-meta">压力范围：0.5-3.0 MPa</div>
                            </div>
                        </div>
                    </div>

                    <!-- 设备监控面板 -->
                    <div class="device-monitoring">
                        <!-- 实时参数监控 -->
                        <div class="monitoring-card">
                            <div class="monitoring-header">
                                <h3>实时参数监控</h3>
                                <div class="refresh-btn">
                                    <i class="fas fa-sync-alt"></i>
                                    刷新数据
                                </div>
                            </div>
                            <div class="params-grid">
                                <div class="param-item">
                                    <div class="param-label">水泵频率</div>
                                    <div class="param-value">
                                        <span id="pump-frequency">50</span>
                                        <span class="unit">Hz</span>
                                    </div>
                                    <div class="param-chart">
                                        <canvas id="pumpFrequencyChart"></canvas>
                                    </div>
                                </div>
                                <div class="param-item">
                                    <div class="param-label">出水流量</div>
                                    <div class="param-value">
                                        <span id="water-flow">2.8</span>
                                        <span class="unit">m³/h</span>
                                    </div>
                                    <div class="param-chart">
                                        <canvas id="waterFlowChart"></canvas>
                                    </div>
                                </div>
                                <div class="param-item">
                                    <div class="param-label">肥料浓度</div>
                                    <div class="param-value">
                                        <span id="fertilizer-concentration">1.2</span>
                                        <span class="unit">%</span>
                                    </div>
                                    <div class="param-chart">
                                        <canvas id="fertilizerChart"></canvas>
                                    </div>
                                </div>
                                <div class="param-item">
                                    <div class="param-label">管道压力</div>
                                    <div class="param-value">
                                        <span id="pipe-pressure">2.3</span>
                                        <span class="unit">MPa</span>
                                    </div>
                                    <div class="param-chart">
                                        <canvas id="pressureChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 设备告警信息 -->
                        <div class="monitoring-card">
                            <div class="monitoring-header">
                                <h3>设备告警信息</h3>
                                <div class="filter-group">
                                    <select id="alarm-level-filter">
                                        <option value="all">所有级别</option>
                                        <option value="high">高级警告</option>
                                        <option value="medium">中级警告</option>
                                        <option value="low">低级警告</option>
                                    </select>
                                    <select id="alarm-status-filter">
                                        <option value="all">所有状态</option>
                                        <option value="unprocessed">未处理</option>
                                        <option value="processing">处理中</option>
                                        <option value="processed">已处理</option>
                                    </select>
                                </div>
                            </div>
                            <div class="data-table">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>时间</th>
                                            <th>设备</th>
                                            <th>告警类型</th>
                                            <th>告警级别</th>
                                            <th>告警内容</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="alarm-records">
                                        <!-- 数据将通过 JavaScript 动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- 设备维护记录 -->
                        <div class="monitoring-card">
                            <div class="monitoring-header">
                                <h3>设备维护记录</h3>
                            
                            </div>
                            <div class="data-table">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>维护时间</th>
                                            <th>设备名称</th>
                                            <th>维护类型</th>
                                            <th>维护内容</th>
                                            <th>维护人员</th>
                                            <th>维护结果</th>
                                            <th>下次维护</th>
                                        </tr>
                                    </thead>
                                    <tbody id="maintenance-records">
                                        <!-- 数据将通过 JavaScript 动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 土壤墒情监测面板 -->
                <div class="soil-monitoring-panel" style="display: none;">
                    <!-- 这里放土壤墒情监测相关的内容 -->
                </div>

                <!-- 墒情趋势面板 -->
                <div class="moisture-trend-panel" style="display: none;">
                    <div class="section-header">
                        <h2><i class="fas fa-chart-line"></i> 墒情趋势分析</h2>
                    </div>

                    <!-- 时间范围选择器 -->
                    <div class="time-range-selector">
                        <div class="selector-group">
                            <button class="time-btn active" data-range="24h">24小时</button>
                            <button class="time-btn" data-range="7d">7天</button>
                            <button class="time-btn" data-range="30d">30天</button>
                            <button class="time-btn" data-range="custom">自定义</button>
                        </div>
                        <div class="custom-date-range" style="display: none;">
                            <input type="date" id="start-date">
                            <span>至</span>
                            <input type="date" id="end-date">
                            <button class="apply-btn">应用</button>
                        </div>
                    </div>

                    <!-- 趋势图表区域 -->
                    <div class="trend-charts">
                        <!-- 墒情变化趋势图 -->
                        <div class="trend-card">
                            <div class="trend-header">
                                <h3>墒情变化趋势</h3>
                                <div class="chart-controls">
                                    <select id="area-trend-selector">
                                        <option value="all">所有区域</option>
                                        <option value="area1">区域一</option>
                                        <option value="area2">区域二</option>
                                        <option value="area3">区域三</option>
                                        <option value="area4">区域四</option>
                                        <option value="area5">区域五</option>
                                    </select>
                                </div>
                            </div>
                            <div class="chart-container">
                                <canvas id="moistureTrendChart"></canvas>
                            </div>
                        </div>

                        <!-- 统计分析卡片 -->
                        <div class="stats-grid">
                            <div class="stats-card">
                                <div class="stats-icon">
                                    <i class="fas fa-tint"></i>
                                </div>
                                <div class="stats-info">
                                    <h3>平均墒情</h3>
                                    <div class="stats-value">
                                        <span id="trend-avg-moisture">--</span>
                                        <span class="unit">%</span>
                                    </div>
                                    <div class="stats-change increase">
                                        <i class="fas fa-arrow-up"></i>
                                        <span>2.5%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="stats-card">
                                <div class="stats-icon">
                                    <i class="fas fa-arrow-up"></i>
                                </div>
                                <div class="stats-info">
                                    <h3>最高墒情</h3>
                                    <div class="stats-value">
                                        <span id="trend-max-moisture">--</span>
                                        <span class="unit">%</span>
                                    </div>
                                    <div class="stats-time">出现时间: <span id="max-moisture-time">--</span></div>
                                </div>
                            </div>
                            <div class="stats-card">
                                <div class="stats-icon">
                                    <i class="fas fa-arrow-down"></i>
                                </div>
                                <div class="stats-info">
                                    <h3>最低墒情</h3>
                                    <div class="stats-value">
                                        <span id="trend-min-moisture">--</span>
                                        <span class="unit">%</span>
                                    </div>
                                    <div class="stats-time">出现时间: <span id="min-moisture-time">--</span></div>
                                </div>
                            </div>
                        </div>

                        <!-- 异常记录表格 -->
                        <div class="trend-card">
                            <div class="trend-header">
                                <h3>异常记录</h3>
                                <div class="filter-controls">
                                    <select id="anomaly-type-filter">
                                        <option value="all">所有类型</option>
                                        <option value="high">墒情偏高</option>
                                        <option value="low">墒情偏低</option>
                                    </select>
                                </div>
                            </div>
                            <div class="data-table">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>时间</th>
                                            <th>区域</th>
                                            <th>监测点</th>
                                            <th>异常类型</th>
                                            <th>墒情值</th>
                                            <th>持续时间</th>
                                        </tr>
                                    </thead>
                                    <tbody id="anomaly-records">
                                        <!-- 数据将通过 JavaScript 动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分层监测面板 -->
                <div class="layered-monitoring-panel" style="display: none;">
                    <div class="section-header">
                        <h2><i class="fas fa-layer-group"></i> 土壤分层监测</h2>
                    </div>

                    <!-- 分层概览 -->
                    <div class="layer-overview">
                        <div class="layer-card">
                            <div class="layer-icon">
                                <i class="fas fa-arrow-up"></i>
                            </div>
                            <div class="layer-info">
                                <h3>表层 (0-10cm)</h3>
                                <div class="layer-value">
                                    <span id="surface-moisture">--</span>
                                    <span class="unit">%</span>
                                </div>
                                <div class="layer-status normal">适宜</div>
                            </div>
                        </div>
                        <div class="layer-card">
                            <div class="layer-icon">
                                <i class="fas fa-arrows-alt-v"></i>
                            </div>
                            <div class="layer-info">
                                <h3>中层 (10-20cm)</h3>
                                <div class="layer-value">
                                    <span id="middle-moisture">--</span>
                                    <span class="unit">%</span>
                                </div>
                                <div class="layer-status warning">偏湿</div>
                            </div>
                        </div>
                        <div class="layer-card">
                            <div class="layer-icon">
                                <i class="fas fa-arrow-down"></i>
                            </div>
                            <div class="layer-info">
                                <h3>深层 (20-30cm)</h3>
                                <div class="layer-value">
                                    <span id="deep-moisture">--</span>
                                    <span class="unit">%</span>
                                </div>
                                <div class="layer-status danger">偏干</div>
                            </div>
                        </div>
                    </div>

                    <!-- 分层监测图表区域 -->
                    <div class="layer-charts">
                        <!-- 区域选择和时间范围 -->
                        <div class="chart-controls">
                            <div class="control-group">
                                <label>监测区域：</label>
                                <select id="layer-area-selector">
                                    <option value="all">所有区域</option>
                                    <option value="area1">区域一</option>
                                    <option value="area2">区域二</option>
                                    <option value="area3">区域三</option>
                                    <option value="area4">区域四</option>
                                    <option value="area5">区域五</option>
                                </select>
                            </div>
                            <div class="control-group">
                                <label>监测点：</label>
                                <select id="layer-point-selector">
                                    <option value="all">所有监测点</option>
                                </select>
                            </div>
                        </div>

                        <!-- 分层墒情对比图 -->
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3>分层墒情对比</h3>
                            </div>
                            <div class="chart-container">
                                <canvas id="layerComparisonChart"></canvas>
                            </div>
                        </div>

                        <!-- 分层墒情变化趋势 -->
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3>分层墒情变化趋势</h3>
                                <div class="time-selector">
                                    <button class="time-btn active" data-range="24h">24h</button>
                                    <button class="time-btn" data-range="7d">7d</button>
                                    <button class="time-btn" data-range="30d">30d</button>
                                </div>
                            </div>
                            <div class="chart-container">
                                <canvas id="layerTrendChart"></canvas>
                            </div>
                        </div>

                        <!-- 分层数据表格 -->
                        <div class="data-card">
                            <div class="data-header">
                                <h3>分层监测数据</h3>
                              
                            </div>
                            <div class="data-table">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>时间</th>
                                            <th>区域</th>
                                            <th>监测点</th>
                                            <th>表层墒情</th>
                                            <th>中层墒情</th>
                                            <th>深层墒情</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody id="layer-data-body">
                                        <!-- 数据将通过 JavaScript 动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 区域分布面板 -->
                <div class="area-distribution-panel" style="display: none;">
                    <div class="section-header">
                        <h2><i class="fas fa-map-marked-alt"></i> 区域墒情分布</h2>
                    </div>

                    <!-- 区域概览 -->
                    <div class="area-overview">
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-map"></i>
                            </div>
                            <div class="overview-info">
                                <h3>监测区域</h3>
                                <div class="overview-value">
                                    <span>5</span>
                                    <span class="unit">个</span>
                                </div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-podcast"></i>
                            </div>
                            <div class="overview-info">
                                <h3>监测点位</h3>
                                <div class="overview-value">
                                    <span>60</span>
                                    <span class="unit">个</span>
                                </div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-exclamation-triangle"></i>
                            </div>
                            <div class="overview-info">
                                <h3>异常点位</h3>
                                <div class="overview-value">
                                    <span id="abnormal-points">--</span>
                                    <span class="unit">个</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 区域分布图表区域 -->
                    <div class="distribution-charts">
                        <!-- 热力图和区域选择 -->
                        <div class="chart-card full-width">
                            <div class="chart-header">
                                <h3>墒情分布热力图</h3>
                                <div class="chart-controls">
                                    <div class="control-group">
                                        <label>显示模式：</label>
                                        <select id="heatmap-mode">
                                            <option value="moisture">墒情值</option>
                                          
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="heatmap-container">
                                <canvas id="moistureHeatmap"></canvas>
                            </div>
                        </div>

                        <!-- 区域对比图 -->
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3>区域墒情对比</h3>
                            </div>
                            <div class="chart-container">
                                <canvas id="areaComparisonChart"></canvas>
                            </div>
                        </div>

                        <!-- 区域统计信息 -->
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3>区域统计信息</h3>
                            </div>
                            <div class="area-stats">
                                <div class="area-stats-grid">
                                    <!-- 区域统计卡片将通过 JavaScript 动态生成 -->
                                </div>
                            </div>
                        </div>

                        <!-- 异常点位列表 -->
                        <div class="data-card full-width">
                            <div class="data-header">
                                <h3>异常点位列表</h3>
                                    <div class="filter-group">
                                    <select id="anomaly-area-filter">
                                        <option value="all">所有区域</option>
                                        <option value="area1">区域一</option>
                                        <option value="area2">区域二</option>
                                        <option value="area3">区域三</option>
                                        <option value="area4">区域四</option>
                                        <option value="area5">区域五</option>
                                        </select>
                                    <select id="anomaly-type-filter">
                                        <option value="all">所有类型</option>
                                        <option value="high">墒情偏高</option>
                                        <option value="low">墒情偏低</option>
                                        </select>
                                    <div class="export-btn">
                                        <i class="fas fa-download"></i>
                                        导出数据
                                    </div>
                                </div>
                            </div>
                            <div class="data-table">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>区域</th>
                                            <th>监测点</th>
                                            <th>墒情值</th>
                                            <th>温度</th>
                                            <th>异常类型</th>
                                            <th>持续时间</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="anomaly-points-body">
                                        <!-- 数据将通过 JavaScript 动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 实时数据监测面板 -->
                <div class="realtime-monitoring-panel" style="display: none;">
                    <div class="section-header">
                        <h2><i class="fas fa-microscope"></i> 实时数据监测</h2>
                    </div>

                    <!-- 传感器状态概览 -->
                    <div class="sensor-overview">
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-wifi"></i>
                            </div>
                            <div class="overview-info">
                                <h3>在线传感器</h3>
                                <div class="overview-value">
                                    <span id="online-sensors">24</span>
                                    <span class="unit">个</span>
                                </div>
                                <div class="device-meta">总数：<span id="total-sensors">25</span>个</div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-exchange-alt"></i>
                            </div>
                            <div class="overview-info">
                                <h3>数据采集频率</h3>
                                <div class="overview-value">
                                    <span id="collection-frequency">30</span>
                                    <span class="unit">秒/次</span>
                                </div>
                                <div class="device-meta">上次采集：<span id="last-collection">1分钟前</span></div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-exclamation-circle"></i>
                            </div>
                            <div class="overview-info">
                                <h3>异常传感器</h3>
                                <div class="overview-value">
                                    <span id="abnormal-sensors">1</span>
                                    <span class="unit">个</span>
                                </div>
                                <div class="device-meta">需要维护</div>
                            </div>
                        </div>
                    </div>

                    <!-- 实时数据监测面板 -->
                    <div class="monitoring-section">
                        <!-- 传感器选择和数据展示 -->
                        <div class="monitoring-card">
                            <div class="monitoring-header">
                                <h3>实时数据监测</h3>
                                <div class="sensor-controls">
                                    <select id="sensor-type-selector">
                                        <option value="all">所有类型</option>
                                        <option value="moisture">土壤墒情</option>
                                        <option value="temperature">土壤温度</option>
                                        <option value="ec">电导率</option>
                                        <option value="ph">pH值</option>
                                        <option value="npk">NPK含量</option>
                                    </select>
                                    <select id="sensor-area-selector">
                                        <option value="all">所有区域</option>
                                        <option value="area1">区域一</option>
                                        <option value="area2">区域二</option>
                                        <option value="area3">区域三</option>
                                        <option value="area4">区域四</option>
                                        <option value="area5">区域五</option>
                                    </select>
                                    <div class="refresh-btn">
                                        <i class="fas fa-sync-alt"></i>
                                        刷新数据
                                    </div>
                                </div>
                            </div>
                            <div class="data-table">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>传感器ID</th>
                                            <th>类型</th>
                                            <th>区域</th>
                                            <th>当前值</th>
                                            <th>状态</th>
                                            <th>信号强度</th>
                                            <th>电池电量</th>
                                            <th>更新时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="sensor-data-body">
                                        <!-- 数据将通过 JavaScript 动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- 实时数据趋势图 -->
                        <div class="monitoring-card">
                            <div class="monitoring-header">
                                <h3>实时数据趋势</h3>
                                <div class="chart-controls">
                                    <select id="trend-sensor-selector">
                                        <option value="all">平均值</option>
                                        <option value="sensor1">传感器 1</option>
                                        <option value="sensor2">传感器 2</option>
                                        <option value="sensor3">传感器 3</option>
                                    </select>
                                    <div class="time-selector">
                                        <button class="time-btn active" data-range="1h">1小时</button>
                                        <button class="time-btn" data-range="6h">6小时</button>
                                        <button class="time-btn" data-range="24h">24小时</button>
                                    </div>
                                </div>
                            </div>
                            <div class="chart-container">
                                <canvas id="realtimeTrendChart"></canvas>
                            </div>
                        </div>

                        <!-- 数据分析卡片 -->
                        <div class="analysis-card">
                            <div class="analysis-header">
                                <h3><i class="fas fa-chart-bar"></i> 数据统计分析</h3>
                                <select id="analysis-type-selector">
                                    <option value="moisture">土壤墒情</option>
                                    <option value="temperature">土壤温度</option>
                                    <option value="ec">电导率</option>
                                    <option value="ph">pH值</option>
                                </select>
                            </div>
                            <div class="analysis-content">
                                <div class="stat-item">
                                    <span class="stat-label"><i class="fas fa-calculator"></i>平均值</span>
                                    <span class="stat-value" id="stat-average">--</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label"><i class="fas fa-arrow-up"></i>最大值</span>
                                    <span class="stat-value" id="stat-max">--</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label"><i class="fas fa-arrow-down"></i>最小值</span>
                                    <span class="stat-value" id="stat-min">--</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label"><i class="fas fa-chart-line"></i>标准差</span>
                                    <span class="stat-value" id="stat-std">--</span>
                                </div>
                            </div>
                            <div class="chart-container">
                                <canvas id="dataDistributionChart"></canvas>
                            </div>
                        </div>

                        <!-- 传感器状态监控卡片 -->
                        <div class="analysis-card">
                            <div class="analysis-header">
                                <h3><i class="fas fa-heartbeat"></i> 传感器状态监控</h3>
                            </div>
                            <div class="sensor-status-grid">
                                <div class="status-item">
                                    <div class="status-icon normal">
                                        <i class="fas fa-check-circle"></i>
                                    </div>
                                    <div class="status-info">
                                        <span class="status-label">正常运行</span>
                                        <span class="status-value" id="normal-count">24</span>
                                    </div>
                                </div>
                                <div class="status-item">
                                    <div class="status-icon warning">
                                        <i class="fas fa-exclamation-circle"></i>
                                    </div>
                                    <div class="status-info">
                                        <span class="status-label">数据异常</span>
                                        <span class="status-value" id="abnormal-count">1</span>
                                    </div>
                                </div>
                                <div class="status-item">
                                    <div class="status-icon danger">
                                        <i class="fas fa-times-circle"></i>
                                    </div>
                                    <div class="status-info">
                                        <span class="status-label">离线</span>
                                        <span class="status-value" id="offline-count">0</span>
                                    </div>
                                </div>
                                <div class="status-item">
                                    <div class="status-icon warning">
                                        <i class="fas fa-battery-quarter"></i>
                                    </div>
                                    <div class="status-info">
                                        <span class="status-label">低电量</span>
                                        <span class="status-value" id="low-battery-count">2</span>
                                    </div>
                                </div>
                            </div>
                            <div class="chart-container">
                                <canvas id="sensorStatusChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 远程控制面板 -->
                <div class="remote-control-panel" style="display: none;">
                    <div class="panel-content">
                        <!-- 远程控制面板的内容将由JavaScript动态生成 -->
                    </div>
                </div>

                <!-- 智能化灌溉面板 -->
                <div class="smart-irrigation-panel">
                    <div class="section-header">
                        <h2><i class="fas fa-brain"></i> 智能化灌溉</h2>
                    </div>

                    <!-- 系统概览 -->
                    <div class="smart-overview">
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-robot"></i>
                            </div>
                            <div class="overview-info">
                                <h3>系统状态</h3>
                                <div class="overview-value">
                                    <span id="ai-system-status" class="status-tag normal">数据获取成功</span>
                                </div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-tint"></i>
                            </div>
                            <div class="overview-info">
                                <h3>建议灌溉量</h3>
                                <div class="overview-value">
                                    <span id="suggested-amount">25</span>
                                    <span class="unit">m³/亩</span>
                                </div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="overview-info">
                                <h3>建议灌溉时间</h3>
                                <div class="overview-value">
                                    <span id="suggested-time">04:00</span>
                                </div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-lightbulb"></i>
                            </div>
                            <div class="overview-info">
                                <h3>智能决策次数</h3>
                                <div class="overview-value">
                                    <span id="decision-count">128</span>
                                    <span class="unit">次</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 监控面板 -->
                    <div class="monitoring-grid">
                        <!-- 土壤墒情实时监测 -->
                        <div class="monitoring-card">
                            <div class="monitoring-header">
                                <h3><i class="fas fa-chart-line"></i> 土壤墒情实时监测</h3>
                                <div class="time-selector">
                                    <button class="time-btn active" data-range="6h">6小时</button>
                                    <button class="time-btn" data-range="24h">24小时</button>
                                    <button class="time-btn" data-range="7d">7天</button>
                                </div>
                            </div>
                            <div class="chart-container">
                                <canvas id="moistureMonitorChart"></canvas>
                            </div>
                        </div>

                        <!-- 灌溉效果分析 -->
                        <div class="monitoring-card">
                            <div class="monitoring-header">
                                <h3><i class="fas fa-chart-bar"></i> 灌溉效果分析</h3>
                            </div>
                            <div class="effect-stats">
                                <div class="stat-item">
                                    <span class="stat-label">平均改善率</span>
                                    <span class="stat-value">23.5%</span>
                                    <span class="stat-trend increase">
                                        <i class="fas fa-arrow-up"></i>
                                        2.1%
                                    </span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">水分利用率</span>
                                    <span class="stat-value">89.2%</span>
                                    <span class="stat-trend increase">
                                        <i class="fas fa-arrow-up"></i>
                                        1.5%
                                    </span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">节水率</span>
                                    <span class="stat-value">32.8%</span>
                                    <span class="stat-trend increase">
                                        <i class="fas fa-arrow-up"></i>
                                        0.8%
                                    </span>
                                </div>
                            </div>
                            <div class="chart-container">
                                <canvas id="irrigationEffectChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- 决策面板 -->
                    <div class="decision-panel">
                        <div class="panel-section">
                            <h3><i class="fas fa-clipboard-list"></i> 决策依据</h3>
                            <div class="decision-content">
                                <div class="decision-factor">
                                    <i class="fas fa-tint"></i>
                                    <span>土壤墒情：48.2% (低于最佳范围)</span>
                                </div>
                                <div class="decision-factor">
                                    <i class="fas fa-cloud-sun-rain"></i>
                                    <span>未来24h降雨概率：10%</span>
                                </div>
                                <div class="decision-factor">
                                    <i class="fas fa-seedling"></i>
                                    <span>作物生长阶段：营养生长期</span>
                                </div>
                            </div>
                        </div>
                        <div class="panel-section">
                            <h3><i class="fas fa-lightbulb"></i> 灌溉建议</h3>
                            <div class="decision-content">
                                <p class="suggestion-text">建议在今日凌晨4:00进行灌溉，每亩用水量25立方米，预计灌溉时长2小时。</p>
                                <div class="suggestion-detail">
                                    <div class="detail-item">
                                        <span class="detail-label">灌溉优先级：</span>
                                        <span class="priority high">高</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">预期改善效果：</span>
                                        <span class="improvement">+15.8%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 控制面板 -->
                    <div class="control-panel">
                        <div class="mode-control">
                            <h3><i class="fas fa-cogs"></i> 模式控制</h3>
                            <div class="mode-buttons">
                                <button id="auto-mode" class="mode-btn active">
                                    <i class="fas fa-robot"></i>
                                    自动模式
                                </button>
                                <button id="manual-mode" class="mode-btn">
                                    <i class="fas fa-hand-paper"></i>
                                    手动模式
                                </button>
                            </div>
                        </div>
                        <div class="execution-control">
                            <button id="execute-btn" class="control-btn execute">
                                <i class="fas fa-play"></i>
                                执行灌溉
                            </button>
                            <button id="cancel-btn" class="control-btn cancel" disabled>
                                <i class="fas fa-stop"></i>
                                取消灌溉
                            </button>
                        </div>
                        <div class="advanced-control">
                            <h3><i class="fas fa-sliders-h"></i> 高级控制选项</h3>
                            <div class="control-options">
                                <div class="control-option">
                                    <label>灌溉强度：</label>
                                    <select id="irrigation-intensity">
                                        <option value="low">低</option>
                                        <option value="medium" selected>中</option>
                                        <option value="high">高</option>
                                    </select>
                                </div>
                                <div class="control-option">
                                    <label>自动模式阈值：</label>
                                    <input type="range" id="auto-threshold" min="30" max="60" value="45">
                                    <span class="threshold-value">45%</span>
                                </div>
                                <div class="control-option">
                                    <label>灌溉优先级：</label>
                                    <select id="irrigation-priority">
                                        <option value="low">低</option>
                                        <option value="medium">中</option>
                                        <option value="high" selected>高</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 历史记录 -->
                    <div class="history-section">
                        <div class="section-header">
                            <h3><i class="fas fa-history"></i> 决策历史记录</h3>
                            <div class="history-filter">
                                <select id="history-range">
                                    <option value="7">近7天</option>
                                    <option value="30">近30天</option>
                                    <option value="90">近90天</option>
                                </select>
                            </div>
                        </div>
                        <div class="history-table">
                            <table>
                                <thead>
                                    <tr>
                                        <th>决策时间</th>
                                        <th>决策类型</th>
                                        <th>灌溉建议</th>
                                        <th>执行状态</th>
                                        <th>执行结果</th>
                                    </tr>
                                </thead>
                                <tbody id="decision-history">
                                    <tr>
                                        <td>2024-03-21 04:00</td>
                                        <td>自动决策</td>
                                        <td>灌溉25m³/亩，持续2小时</td>
                                        <td><span class="status-tag success">已完成</span></td>
                                        <td>墒情提升15.8%</td>
                                    </tr>
                                    <tr>
                                        <td>2024-03-20 16:30</td>
                                        <td>手动决策</td>
                                        <td>灌溉20m³/亩，持续1.5小时</td>
                                        <td><span class="status-tag success">已完成</span></td>
                                        <td>墒情提升12.3%</td>
                                    </tr>
                                    <tr>
                                        <td>2024-03-19 04:00</td>
                                        <td>自动决策</td>
                                        <td>灌溉30m³/亩，持续2.5小时</td>
                                        <td><span class="status-tag warning">已取消</span></td>
                                        <td>-</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 施肥方案面板 -->
                <div class="fertilizer-plan-panel" style="display: none;">
                    <div class="section-header">
                        <h2><i class="fas fa-tasks"></i> 施肥方案管理</h2>
                    </div>

                    <!-- 方案概览 -->
                    <div class="plan-overview">
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <div class="overview-info">
                                <h3>当前执行方案</h3>
                                <div class="overview-value" id="current-plan">玉米生长期方案</div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="overview-info">
                                <h3>执行进度</h3>
                                <div class="overview-value" id="plan-progress">65%</div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-flask"></i>
                            </div>
                            <div class="overview-info">
                                <h3>肥料用量</h3>
                                <div class="overview-value" id="fertilizer-usage">486 kg</div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-coins"></i>
                            </div>
                            <div class="overview-info">
                                <h3>成本统计</h3>
                                <div class="overview-value" id="cost-statistics">¥2,430</div>
                            </div>
                        </div>
                    </div>

                    <!-- 方案列表和详情 -->
                    <div class="plan-content">
                        <div class="plan-list">
                            <div class="list-header">
                                <h3>施肥方案列表</h3>
                            </div>
                            <div id="plan-list">
                                <!-- 方案列表将通过JavaScript动态生成 -->
                            </div>
                        </div>

                        <div class="plan-details">
                            <div class="details-header">
                                <h3>方案详情</h3>
                                <div class="detail-actions">
                                    <button class="delete-btn danger-btn" data-plan-id="${plan.id}" data-plan-type="fertilizer">
                                        <i class="fas fa-trash-alt"></i>删除方案
                                    </button>
                                </div>
                            </div>
                            <div class="details-content" id="plan-details">
                                <!-- 方案详情将由JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>

                    <!-- 执行历史 -->
                    <div class="execution-history">
                        <div class="history-header">
                            <h3>执行历史</h3>
                            <div class="history-filter">
                                <select id="history-time-range">
                                    <option value="7d">近7天</option>
                                    <option value="30d">近30天</option>
                                    <option value="90d">近90天</option>
                                </select>
                            </div>
                        </div>
                        <div class="history-content">
                            <div class="history-chart">
                                <canvas id="executionHistoryChart"></canvas>
                            </div>
                            <div class="history-list" id="execution-history">
                                <!-- 执行历史记录将由JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 施水方案面板 -->
                <div class="irrigation-plan-panel" style="display: none;">
                    <div class="section-header">
                        <h2><i class="fas fa-water"></i> 施水方案管理</h2>
                    </div>

                    <!-- 方案概览 -->
                    <div class="plan-overview">
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <div class="overview-info">
                                <h3>当前执行方案</h3>
                                <div class="overview-value" id="current-irrigation-plan">玉米全生育期灌溉方案</div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="overview-info">
                                <h3>执行进度</h3>
                                <div class="overview-value" id="irrigation-progress">60%</div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-tint"></i>
                            </div>
                            <div class="overview-info">
                                <h3>用水量</h3>
                                <div class="overview-value" id="water-usage">2700 m³</div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="overview-icon">
                                <i class="fas fa-coins"></i>
                            </div>
                            <div class="overview-info">
                                <h3>成本统计</h3>
                                <div class="overview-value" id="water-cost">¥4,050</div>
                            </div>
                        </div>
                    </div>

                    <!-- 方案列表和详情 -->
                    <div class="plan-content">
                        <div class="plan-list">
                            <div class="list-header">
                                <h3>施水方案列表</h3>
                                <button class="add-irrigation-plan-btn">
                                   
                                </button>
                            </div>
                            <div class="plan-items" id="irrigation-plan-list">
                                <!-- 方案列表将由JavaScript动态生成 -->
                            </div>
                        </div>

                        <div class="plan-details">
                            <div class="details-header">
                                <h3>方案详情</h3>
                             
                            </div>
                            <div class="details-content" id="irrigation-plan-details">
                                <!-- 方案详情将由JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>

                    <!-- 执行历史 -->
                    <div class="execution-history">
                        <div class="history-header">
                            <h3>执行历史</h3>
                            <div class="history-filter">
                                <select id="irrigation-history-range">
                                    <option value="7d">近7天</option>
                                    <option value="30d">近30天</option>
                                    <option value="90d">近90天</option>
                                </select>
                            </div>
                        </div>
                        <div class="history-content">
                            <div class="history-chart">
                                <canvas id="irrigation-history-chart"></canvas>
                            </div>
                            <div class="history-list" id="irrigation-execution-history">
                                <!-- 执行历史记录将由JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="js/chart.js"></script>
    <script src="js/sensors.js"></script>
    <script src="js/control.js"></script>
    <script src="js/real-time-moisture.js"></script>
    <script src="js/moisture-trend.js"></script>
    <script src="js/layered-monitoring.js"></script>
    <script src="js/area-distribution.js"></script>
    <script src="js/device-status.js"></script>
    <script src="js/realtime-monitoring.js"></script>
    <script src="js/navigation.js"></script>
    <script src="js/main.js"></script>
    <script src="js/remote-control.js"></script>
    <script src="js/fertilizer-plan.js"></script>
    <script src="js/irrigation-plan.js"></script>
    <script src="js/smart-irrigation.js"></script>
</body>
</html> 